<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!--edge浏览器H5兼容设置-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--360浏览器H5兼容设置-->
	<meta name="renderer" content="webkit" />
	<title>网络硬盘</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--导入核心文件-->
	<script src="../bootstrap3/js/holder.js"></script>
	<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
	<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
	<script src="../bootstrap3/js/bootstrap.js"></script>
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="../css/layout.css" />
	<link rel="stylesheet" type="text/css" href="../css/top.css" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	<link href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.core.min.js"></script>
	<script src="../js/adddel.js" type="text/javascript" charset="utf-8"></script>
	<link rel="shortcut icon" href="../favicon.ico"/>


</head>
<style>
	.trg {
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 6px solid black;
		position: absolute;
		left: 181px;
		top: 8px;

	}

	.org-select {
		cursor: default;
		z-index: -1;
		width: 200px;
	}
	.panel{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
</style>

<body>

<div class="container" style="width: 100%;height: 100%;">
	<div class="col-md-10" style="width: 100%;height: 100%;">
		<div class="panel panel-default" style="background: blanchedalmond">
			<ul class="nav nav-tabs">
				<li><a href="index.html">我的文件</a></li>
				<li class="active"><a href="myshare.html">我的共享</a></li>
				<li><a href="share.html">别人共享</a></li>
				<li><a href="password.html">修改密码</a></li>
				<li><a href="login.html" onclick="logout()">注销登录</a></li>
			</ul>
			<div class="panel-body">
				<div style="margin-bottom:10px;">当前位置：
					<input id="showUrl" type="text" disabled style="width: 700px" class="btn btn-default" data-dismiss="modal"/>
					<input type="button" value="上一级" id="up" class="btn btn-default" data-dismiss="modal" onclick="inFloderup() ">
				</div>
				<!--<form id="searchForm">
					<div style="margin-bottom:10px;">模糊搜索：
						<input placeholder="请输入文件名" id="search" type="text" style="width: 500px" class="btn btn-default" data-dismiss="modal"/>
						<input type="button" value="搜索"  onclick="searchF()" class="btn btn-default" data-dismiss="modal">
						<input type="reset" value="重置" class="btn btn-default" data-dismiss="modal">
						检索子文件夹：<input type="checkbox" name="zi" value="00" />
					</div>
				</form>-->
				<input type="hidden" id="temp" value="">
				<input type="hidden" id="tempDel" value="">
				<input type="hidden" id="tempDownload" value="">

				<table class="table table-striped">
					<caption>网络硬盘</caption>
					<thead>
					<tr>
						<th>文件名</th>
						<th>文件大小</th>
						<th>上传时间</th>
						<th>文件类型</th>
						<th>文件路径</th>
						<th>共享状态</th>
						<th colspan="3">操作</th>
					</tr>
					</thead>
					<tbody id="address-list">

					</tbody>
				</table>

				<!-- 删除提示框 -->
				<div class="modal fade" id="delcfmModel">
					<div class="modal-dialog">
						<div class="modal-content message_align">
							<div class="modal-header">
								<h4 class="modal-title">确认信息</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">×</span></button>            </div>
							<div class="modal-body">
								<p id="delcfmMsg">您确认要删除吗？</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<a class="btn btn-success" data-dismiss="modal" id="btnOkDelete" onclick="delOK()">确定</a>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->

				<!-- 下载提示框 -->
				<div class="modal fade" id="downloadModel">
					<div class="modal-dialog">
						<div class="modal-content message_align">
							<div class="modal-header">
								<h4 class="modal-title">确认信息</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">×</span></button>            </div>
							<div class="modal-body">
								<p id="downloadMsg">您确认要下载吗？</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<a class="btn btn-success" data-dismiss="modal" id="btnOkDownload" onclick="fileDownload()">确定</a>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->

				<!--移动文件-->
				<div class="modal fade" id="moveModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" >
									移动文件
								</h4>
							</div>
							<div class="modal-body" style="height:auto">
								<div style="position: relative;top: -102px;margin:90px;left: -101px;">
									<input id="orgName" class="org-select" onclick="showTree()" readonly>
									<i class="trg" style="position: absolute;"></i>
									<input id="orgCode" type="hidden" name="orgCode" />
									<div class="ztree"
										 style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
										<ul id="treeDemo"></ul>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary submit" onclick="submit()">
									提交更改
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
					新建文件夹
				</button>

				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="myModalLabel">
									新建文件夹
								</h4>
							</div>
							<div class="modal-body">
								输入文件夹名称：<input type="text" name="fname">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="savefloder()">
									提交
								</button>
							</div>
						</div>
					</div>
				</div>-->
			</div>
			<!--<div>
				<form id="form-change-avatar" class="form-horizontal" role="form">
					<div class="form-group">
						<div class="clearfix"></div>
						<div class="col-md-offset-2 col-md-4">
							<input type="file" name="file">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input onclick="upload()" type="button" class="btn btn-primary" value="上传" />
						</div>
					</div>
				</form>
			</div>-->
		</div>
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function () {
		showAList();
	});

	function delOK(){
		var fid = $("#tempDel").val();
		$.ajax({
			url: "/fileList/" + fid + "/delete",
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					//showAList();
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("删除失败！" + json.message);
				}
			},
			error: function(json) {
				alert("删除返回异常！" + json.status);
			}
		});
	}

	function logout(){
		$.ajax({
			url: "/login/logout",
			type: "POST",
			data: new FormData($("#form-change-avatar")[0]),
			dataType: "JSON",
			processData: false, // 关闭processData处理数据
			contentType: false, // 关闭contentType发送数据的格式
			success: function(json) {
				if (json.state == 200) {
					location.href = "login.html";
				} else {
					alert("失败！" + json.message);
				}
			}
		});
	}

	function searchF(){
		var url = $("#showUrl").val();
		var parUrl = $("#showUrl").val();
		console.log(parUrl);
		$("#address-list").empty();
		var zi =$("input[name='zi']:checked").val();
		if (zi == null){
			zi = '01'
		}
		$.ajax({
			url: "/fileList/search?keywords="+$("#search").val()+'&zi='+zi+"&parUrl="+parUrl,
			type: "POST",
			dataType: "JSON",
			processData: false, // 关闭processData处理数据
			contentType: false, // 关闭contentType发送数据的格式
			success: function(json) {
				if (json.state == 200) {
					apply(json,url);
				} else {
					alert("失败！" + json.message);
				}
			},
			error: function(xhr) {
				alert("返回异常" + xhr.status);
			}
		});
	}

	function upload(){
		var parUrl = $("#showUrl").val();
		$.ajax({
			url: "/fileList/fileUpload?parUrl="+parUrl,
			type: "POST",
			data: new FormData($("#form-change-avatar")[0]),
			dataType: "JSON",
			processData: false, // 关闭processData处理数据
			contentType: false, // 关闭contentType发送数据的格式
			success: function(json) {
				if (json.state == 200) {
					inFloder("文件夹",parUrl);
					alert("上传成功！")
				} else {
					alert("失败！" + json.message);
				}
			},
			error: function(xhr) {
				alert("返回异常" + xhr.status);
			}
		});
	}

	function showAList() {
		$("#address-list").empty();
		$.ajax({
			url: "/fileList/ShareList/00",
			type: "GET",
			dataType: "JSON",
			success: function (json) {
				var url = '/home';
				apply(json,url);
			},
			error:function (xhr){
				location.href = "login.html";
			}
		});
	}
	function fileDownload() {
		window.location.href = "/fileList/download/"+$("#tempDownload").val();
	}

	function savefloder(){
		var parUrl = $("#showUrl").val();
		var fname = $('input[name="fname"]').val();
		$.ajax({
			url: '/fileList/saveFloder?fileName='+fname+'&parUrl='+parUrl,
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					inFloder("文件夹",parUrl);
				} else {
					alert("失败！" + json.message);
				}
			},
			error: function(json) {
				alert("返回异常！" + json.status);
				//location.href = "login.html";
			}
		});
	}

	//现在是在我的共享页，只需显示我的共享文件
	function inFloder(fileType,url){
		if ("文件夹" === fileType){
			$("#address-list").empty();
			$.ajax({
				url: "/fileList/urlList?url="+url+"&share=00",
				type: "GET",
				dataType: "JSON",
				success: function (json) {
					apply(json,url);
				},
				error:function (xhr){
					alert("查看列表失败！")
				}
			});
		}else {
			/*文件弹框可预览*/
			/*window.location.href = "https://bucket.aoas.top"+url;*/
			window.open(
					`https://bucket.aoas.top`+url,
					"_blank",
					"width=800,height=500,menubar=no,toolbar=no,location=no,status=no,resizable=no"
			)
		}
	}

	function inFloderup(){
		$("#address-list").empty();
		var url = $('#showUrl').val();
		if (url == "/home"){
			alert("当前已经是根目录！");
			showAList();
		}else {
			var ppUrl = url .substring(0, url.lastIndexOf("\/"))
			setTimeout(function(){
				$('#showUrl').val(ppUrl);
			},100)
			$.ajax({
				url: "/fileList/urlList?url="+ppUrl+"&share=00",
				type: "GET",
				dataType: "JSON",
				success: function (json) {
					apply(json,url);
				}
			});
		}
	}

	function deleteByFid(fid) {
		$("#tempDel").val(fid);
	}

	function DownloadByFid(fid) {
		$("#tempDownload").val(fid);
	}

	function apply(json,url){
		var list = json.data;
		if (list.length == 0){
			//alert("当前目录没有文件");
		}
		for (let i = 0; i < list.length; i++) {
			let address =
					`<tr>
					<td onclick="inFloder('${list[i].fileType}','${list[i].url}')"> <img id="i" width="80" height="60" src="img/${list[i].imgUrl}"/> <a href="#">#{filename}</a>  </td>
					<td>#{filesize}</td>
					<td>#{createtime}</td>
					<td>#{filetype}</td>
					<td>#{url}</td>
					<td><a class="btn btn-xs add-del btn-info" onclick="shareButton('${list[i].fid}','${list[i].uid}')"> #{share}</a> </td>
					<td><a onclick="deleteByFid(#{fid})" class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#delcfmModel"><span class="fa fa-trash-o"></span> 删除文件</a></td>
					<!--<td><button class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#moveModal" onclick="moveFile('${list[i].fileName}')"><span class="fa fa-trash-o"></span> 移动文件</button></td>-->
					<td class="show"><a onclick="DownloadByFid('${list[i].fid}')" class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#downloadModel"><span class="fa fa-trash-o"></span> 下载文件</a></td>
					</tr>
					`
			//替换
			address = address.replace("#{fid}", list[i].fid);
			address = address.replace("#{uid}", list[i].uid);
			address = address.replace("#{filename}", list[i].fileName);
			address = address.replace("#{filesize}", list[i].fileSize);
			address = address.replace("#{createtime}", list[i].createTime);
			address = address.replace("#{share}", list[i].share);
			address = address.replace("#{url}", list[i].url);
			address = address.replace("#{filetype}", list[i].fileType);
			address = address.replace("#{parid}", list[i].parId);
			address = address.replace("#{imgurl}", list[i].imgUrl);
			//放入
			$("#address-list").append(address);
			if ('文件夹' === list[i].fileType){
				document.getElementsByClassName("show")[i].style.visibility="hidden";
			}
		}
		if (list.length > 1){
			$("#showUrl").val(list[0].parUrl)
		}else {
			$("#showUrl").val(url)
		}
	}

	function shareButton(fid,uid){
		$.ajax({
			url: "/fileList/shareState?fid="+fid+"&uid="+uid,
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("状态：" + json.message);
				}
			},
			error: function(json) {
				/*alert("返回ERROR！" + json.status);*/
			}
		});
	}

	function submit(){
		var fileName = $("#temp").val();
		if (treeNodename == null || treeNodename == ''){
			alert("确定要移动《"+fileName+"》到《/home》根目录吗？")
		}else {
			alert("确定要移动《"+fileName+"》到《"+treeNodename+"》吗？")
			if (fileName == treeNodename){
				alert("不能移动到自己目录下");
			}
		}
		moveRun(treeNodename,$("#temp").val());
		$(".submit").attr("data-dismiss","modal");
	}
	//树状图展示
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		//回调
		callback: {
			onClick: zTreeOnClick
		},
		view: {
			fontCss: { fontSize: "14px" }
		}
	};

	function moveFile(filename){
		$("#temp").val(filename);
	}
	var treeNodename = ''
	//节点点击事件
	function zTreeOnClick(event, treeId, treeNode) {
		treeNodename = treeNode.name
		//console.log('当前文件位置：',treeNode.getPath().map(function (node) { return node.name; }).join('-'))
		$('#orgName').val(treeNode.name);
		$('#orgCode').val(treeNode.Id);
		hideTree();
		// moveRun(treeNode.name,$("#temp").val());
	};

	function moveRun(pathName,fileName){
		$.ajax({
			url: "/fileList/moveFile?pathName="+pathName+"&fileName="+fileName,
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					alert("移动成功！")
					//showAList();
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("状态：" + json.message);
				}
			},
			error: function(json) {
				alert("ERROR！" + json.status);
			}
		});
	}

	//下拉框显示 隐藏
	function showTree() {
		if ($('.ztree').css('display') == 'none') {
			$('.ztree').css('display', 'block');
		} else {
			$('.ztree').css('display', 'none');
		}
		$("body").bind("mousedown", onBodyDownByActionType);
	};

	$(document).ready(function () {
		//初始组织树状图
		$.ajax({
			url: "/fileList/jsonTree",
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					$.fn.zTree.init($("#treeDemo"), setting, json.data);
				} else {
					alert("jsonTree状态：" + json.message);
				}
			},
			error: function(json) {

			}
		});

	});

	function hideTree() {
		$('.ztree').css('display', 'none');
		$("body").unbind("mousedown", onBodyDownByActionType);
		return false;
	}

	//区域外点击事件
	function onBodyDownByActionType(event) {
		if (event.target.id.indexOf('treeDemo') == -1) {
			if (event.target.id != 'selectDevType') {
				hideTree();
			}
		}
	}

</script>
</body>

</html>